<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>产品详情</title>
    <link rel="stylesheet" href="../plugins/element-ui_2.14.1.css">
    <link rel="stylesheet" href="../assests/base.css">
    <link rel="stylesheet" href="../assests/headerall.css">
    <link rel="stylesheet" href="../assests/footerwhite.css">
    <link rel="stylesheet" href="../css/productdetail.css">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <script src="../assests/base.js"></script>
    <script src="../plugins/jquery.js"></script>
    <script src="../plugins/vue_2.5.2.js"></script>
    <script src="../plugins/element-ui_2.14.1.js"></script>
    <script src="../components/headerall.js"></script>
    <script src="../components/crumbs.js"></script>
    <script src="../components/footerwhite.js"></script>

</head>
<body>
<div id="pc" v-cloak>
        <!--头部-->
        <headerall :activeindex='activeNum'></headerall>
        <!--面包屑-->
        <crumb :crumbdate="crunmArray"></crumb>

         <!--产品详情-->
       <div id="productdetail" v-if="detailFlag">
           <div class="productdetail-content">
               <div class="productdetail-left">
                   <p class="productdetail-title">华泰医疗无忧百万医疗</p>
                   <ul class="clearfix">
                       <li class="productdetail-support">小icon需ui再切图</li>
                       <li class="productdetail-support">小icon需ui再切图</li>
                       <li class="productdetail-support">100种重疾医疗0免赔</li>
                   </ul>
                   <div class="pro-advantage-newbox clearfix">
                       <p>7×24小时客户服务</p>
                       <p>理赔咨询</p>
                       <p>保全变更协助</p>
                       <p>电子保单</p>
                   </div>
                   <div class="productdetail-form">
                       <div class="productdetail-form-list">
                           <span class="productdetail-form-title">出生日期</span>
                           <el-date-picker type="date" placeholder="选择日期" v-model="deatilForm.date" class="productdetail-date" :clearable="false"></el-date-picker>
                           <span class="productdetail-age-text">投保年龄为出生满30天至60周岁，最高可80</span>
                       </div>
                       <div class="productdetail-form-list">
                           <span class="productdetail-form-title">性别</span>
                           <span class="productdetail-form-check productdetail-form-check-active">男</span>
                           <span class="productdetail-form-check">女</span>
                       </div>
                       <div class="productdetail-form-list">
                           <span class="productdetail-form-title">社保</span>
                           <span class="productdetail-form-check productdetail-form-check-active">有</span>
                           <span class="productdetail-form-check">无</span>
                       </div>
                       <div class="productdetail-form-list">
                           <span class="productdetail-form-title">缴费期限</span>
                           <span class="productdetail-form-check productdetail-form-check-active">5年</span>
                           <span class="productdetail-form-check">10年</span>
                           <span class="productdetail-form-check">20年</span>
                       </div>
                   </div>

               </div>
               <div class="productdetail-right">
                   <div class="productdetail-img">
                       <img src="https://images.zhongmin.cn/00/wap/images/huokebao/news_small_2457.jpg" alt="">
                   </div>
                   <p class="productdetail-money">保费</p>
                   <p class="productdetail-money-num">
                       <span class="f20">¥</span>
                       <span class="f26">150</span>
                   </p>
                   <div class="productdetail-btn" @click="jump('noticeFlag')">立即投保</div>
               </div>
           </div>
           <div class="productdetail-nav">
               <ul class="productdetail-list-box clearfix">
                   <li class="productdetail-nav-list " :class="{'productdetail-nav-list-active':firstNavFlagDetail}" @click="switchNavDetail('firstNavFlagDetail')">产品解读</li>
                   <li class="productdetail-nav-list" :class="{'productdetail-nav-list-active':secondNavFlagDetail }" @click="switchNavDetail('secondNavFlagDetail')">投保示例</li>
                   <li class="productdetail-nav-list" :class="{'productdetail-nav-list-active':threeNavFlagDetail}" @click="switchNavDetail('threeNavFlagDetail')">投保须知</li>
                   <li class="productdetail-nav-list" :class="{'productdetail-nav-list-active':fourNavFlagDetail}"@click="switchNavDetail('fourNavFlagDetail')">产品评价</li>
               </ul>
               <div class="productdetail-nav-deatil" v-show="firstNavFlagDetail">
                   解读内容
               </div>
               <div class="productdetail-nav-deatil" v-show="secondNavFlagDetail">
                   2
               </div>
               <div class="productdetail-nav-deatil" v-show="threeNavFlagDetail">
                   3
               </div>
               <div class="productdetail-nav-deatil" v-show="fourNavFlagDetail">
                   4
               </div>
           </div>
       </div>
       <!--投保告知-->
       <div id="insurancenotice" v-if="noticeFlag">
           <div class="insurancenotice-content">
               <div class="insurancenotice-progress">
                   <span class="progress-cricle progress-cricle-active">1</span>
                   <span class="progress-text progress-text-active">投保告知</span>
                   <span class="progress-line"></span>
                   <span class="progress-cricle">2</span>
                   <span class="progress-text">填写投保信息</span>
                   <span class="progress-line"></span>
                   <span class="progress-cricle">3</span>
                   <span class="progress-text">确认并支付</span>
               </div>
               <div class="insurancenotice-article">
                   <h2 class="insurancenotice-article-title">投保告知</h2>
                   <div class="insurancenotice-article-notice">ininsur首发发放撒<br>是对方撒分撒法萨芬的啥地方分撒法萨芬的啥地方分撒法萨芬的啥地方分撒法萨芬的啥地方分撒法萨芬的啥地方分撒法萨芬的啥地方分撒法萨芬的br啥地方分撒法萨芬的啥地方分撒法萨芬的啥地方萨芬色法萨芬ancenotice-article-noticesurinsurancenotice-article-noticeancenotice-article-notice</div>
               </div>
               <div class="insurancenotice-btn-box">
                   <div class="insurancenotice-btn" @click="jump('inforFlag')">下一步</div>
               </div>

           </div>
       </div>
       <!--填写投保信息-->
       <div id="infuranceinfore" v-if="inforFlag">
          <div class="infuranceinfore-box">
              <div class="insurancenotice-progress">
                  <span class="progress-cricle progress-cricle-active">1</span>
                  <span class="progress-text progress-text-active">投保告知</span>
                  <span class="progress-line"></span>
                  <span class="progress-cricle progress-cricle-active">2</span>
                  <span class="progress-text">填写投保信息</span>
                  <span class="progress-line"></span>
                  <span class="progress-cricle">3</span>
                  <span class="progress-text">确认并支付</span>
              </div>
              <div class="infuranceinfore-content">
                  <div class="infuranceinfore-left">
                      <div class="infuranceinfore-left-top">
                          <span class="left-redline"></span>
                          <span class="left-title">填写投保信息</span>
                      </div>
                      <div class="form-date-box">
                          <span class="form-title">起保日期</span>
                          <el-date-picker type="date" placeholder="选择日期" v-model="form.beginDate" class="form-date"
                                          :clearable="false"></el-date-picker>
                          <p class="form-num-text">投保年龄为出生满30天至60周岁，最高可80</p>
                      </div>
                      <div class="policy-holder-box">
                          <p class="holder-title">投保人信息</p>
                          <div class="holder-info">
                              <el-form ref="form" :model="form" label-width="183px">
                                  <el-form-item label="投保人姓名">
                                      <el-input v-model="form.name" style="width:288px" placeholder="请输入投保人姓名"></el-input>
                                  </el-form-item>
                                  <el-form-item label="证件号码">
                                      <el-select v-model="form.type" placeholder="请选择" style="width:110px">
                                          <el-option label="区域一" value="shanghai"></el-option>
                                          <el-option label="区域二" value="beijing"></el-option>
                                      </el-select>
                                      <el-input v-model="form.num" style="width:168px;margin-left:9px" placeholder="请输入证件号码"></el-input>
                                  </el-form-item>
                                  <el-form-item label="出生日期">
                                      <el-date-picker type="date" placeholder="选择日期" v-model="form.date" class="form-date"
                                                      :clearable="false"></el-date-picker>
                                  </el-form-item>
                                  <el-form-item label="性别">
                                      <span class="sex sex-active">男</span>
                                      <span class="sex">女</span>
                                  </el-form-item>
                                  <el-form-item label="手机号码">
                                      <el-input v-model="form.tel" style="width:288px" placeholder="请输入手机号"></el-input>
                                  </el-form-item>
                                  <el-form-item label="电子邮箱">
                                      <el-input v-model="form.email" style="width:288px" placeholder="请输入电子邮箱"></el-input>
                                  </el-form-item>
                              </el-form>
                          </div>
                          <div class="holder-btn-box">
                              <div class="holder-btn holder-btn-nev" @click="jump('noticeFlag')">上一步</div>
                              <div class="holder-btn holder-btn-next" @click="jump('payFlag')">去支付</div>
                          </div>
                      </div>
                  </div>

                  <div class="infuranceinfore-right">
                      <img src="https://images.zhongmin.cn/images/2018/320/6507.jpg" alt="" class="infu-img">
                      <p class="right-title">华天医疗博爱心保险</p>
                      <ul>
                          <li class="left-list">
                              <span>保障期限 </span>
                              <span class="left-list-num">1年</span>
                          </li>
                          <li class="left-list">
                              <span>年龄区间</span>
                              <span class="left-list-num">1年</span>
                          </li>
                          <li class="left-list">
                              <span>份数 单价</span>
                              <span class="left-list-num">1年</span>
                          </li>
                      </ul>
                      <div class="left-total clearfix">
                          <span class="left-total-text">合计</span>
                        <span style="float: right">
              <span class="left-total-rmb">￥</span>
             <span class="left-total-money">150.00</span>
            </span>
                      </div>
                  </div>
              </div>
          </div>
      </div>
        <!--确认并支付-->
      <div id="confirmPay" v-if="payFlag">
        <div class="infuranceinfore-box">
            <div class="insurancenotice-progress">
                <span class="progress-cricle progress-cricle-active">1</span>
                <span class="progress-text progress-text-active">投保告知</span>
                <span class="progress-line"></span>
                <span class="progress-cricle progress-cricle-active">2</span>
                <span class="progress-text">填写投保信息</span>
                <span class="progress-line"></span>
                <span class="progress-cricle progress-cricle-active">3</span>
                <span class="progress-text">确认并支付</span>
            </div>
            <div class="confirm-content">
                <div class="confirm-title">
                    <span class="confirm-point"></span>
                    <span>收银台</span>
                </div>
                <div class="confirm-product">
                    <ul class="list-title clearfix">
                        <li class="list-name">产品名称</li>
                        <li class="list-info">订单信息</li>
                        <li class="list-num">分数</li>
                        <li class="list-money">保费</li>
                    </ul>
                    <ul class="list-content clearfix">
                        <li class="clearfix">
                            <div class="list-name lineblock">
                                <img src="https://images.zhongmin.cn/images/2018/320/6507.jpg" alt=""
                                     class="pronduct-img">
                                <div class="product-name">
                                    <p class="deatil-name">华泰医疗无忧百万医疗</p>
                                    <p class="order-num">订单编号：2020090129312</p>
                                </div>
                            </div>
                            <div class="list-info lineblock">
                                <p class="product-info-detail">被保险人：张娜</p>
                                <p class="product-info-detail">保险期限：1年</p>
                                <p class="product-info-detail">起保时间：023-25-235</p>
                            </div>
                            <div class="list-num lineblock" style="height: 90px">
                                <p>1份</p>
                            </div>
                            <div class="list-money lineblock" style="height: 90px">
                                <p class="deatial-money">350</p>
                            </div>
                        </li>
                    </ul>
                    <div class="totla-money-box">
                        <span class="money-box-text">应付保费</span>
                        <span class="money-box-rem">¥</span>
                        <span class="money-box-num">151.00</span>
                    </div>
                </div>
            </div>
            <div class="productdetail-nav">
                <ul class="productdetail-list-box clearfix">
                    <li class="productdetail-nav-list " @click="switchNavPay('firstNavFlagPay')" :class="{'productdetail-nav-list-active':firstNavFlagPay}">支付平台</li>
                    <li class="productdetail-nav-list" @click="switchNavPay('sectondNavFlagPay')" :class="{'productdetail-nav-list-active':sectondNavFlagPay}">储蓄卡</li>
                    <li class="productdetail-nav-list" @click="switchNavPay('thressNavFlagPay')" :class="{'productdetail-nav-list-active':thressNavFlagPay}">信用卡</li>
                </ul>
                <div class="productdetail-nav-deatil">
                    <div class="first-nav" v-show="firstNavFlagPay">
                        <span class="weixinzhifubao" :class="{'weixinzhifubao-active':firstNavFlagPay}">
                            <img src="../images/paoduct-wechat@2x.png" alt="">
                        </span>
                        <span class="weixinzhifubao">
                            <img src="../images/product-zhifu@2x.png" alt="" style="width: 80px">
                        </span>
                        <div class="pay-button">立即支付</div>
                    </div>
                    <div class="sectond-nav" v-show="sectondNavFlagPay" >
                        储蓄卡
                    </div>
                    <div class="thress-nav" v-show="thressNavFlagPay" >
                        信用卡
                    </div>
                </div>
            </div>
        </div>
    </div>


        <footerwhite></footerwhite>

</div>
</body>
<script src="../components/headerslect.js"></script>
<script src="../plugins/axios.js"></script>
<script src="../plugins/axios.config.js"></script>
<script type="text/javascript" src="../js/productdetail.js"></script>
</body>
</html>